<template>
	<view class="list-filter">
		<u-dropdown ref="dropdownRef" @open="onOpen" @close="onClose">
			<u-dropdown-item v-model="areaValue" title="区域" v-if="areaShow">	
				<house-filter-area :init-value="searchParams" :house-type="houseType" :fenli-id="3" @reset="itemReset"
					@submit="itemSubmit" ref="houseFilterItem0Ref"></house-filter-area>
			</u-dropdown-item>
			<u-dropdown-item v-model="priceValue" title="价格">
				<house-filter-price :init-value="searchParams" :house-type="houseType" :fenli-id="3" @reset="itemReset"
					@submit="itemSubmit" ref="houseFilterItem1Ref"></house-filter-price>
			</u-dropdown-item>
			<u-dropdown-item v-model="huxingValue" title="房型">
				<house-filter-item :init-value="searchParams" :house-type="houseType" :fenli-id="1" @reset="itemReset"
					@submit="itemSubmit" ref="houseFilterItem2Ref"></house-filter-item>
			</u-dropdown-item>
			<u-dropdown-item v-model="moreValue" title="更多">
				<house-filter-item :init-value="searchParams" :house-type="houseType" :fenli-id="0" @reset="itemReset"
					@submit="itemSubmit" ref="houseFilterItem3Ref"></house-filter-item>
			</u-dropdown-item>
			<u-dropdown-item v-model="sortValue" title="排序" :options="sortOptions"></u-dropdown-item>
		</u-dropdown>
	</view>
</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store
	import houseFilterItem from './house-filter-item.vue';
	import houseFilterPrice from './house-filter-price.vue';
	import houseFilterArea from './house-filter-area.vue';
	import {
		ref,
		reactive,
		computed,
		onMounted,
		getCurrentInstance,
		watch,
		onUnmounted
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()
	
	onUnmounted(()=>{
		store.commit('clear_houseFilter')
	})
	
	const dropdownRef = ref();
	const areaValue = ref('')
	const priceValue = ref('')
	const huxingValue = ref('')
	const moreValue = ref('')

	const currentObj = reactive({
		area: 0,
		price: 0,
		huxing: 0,
		more: 0
	})
	const valueObj = reactive({
		area: 1,
		price: 1,
		minPrice: '',
		maxPrice: '',
		huxing: '',
		more: ''
	})


	const leftMenuClick = (i, key) => {
		currentObj[key] = i
	}

	const emit = defineEmits(['confirm'])
	const props = defineProps({
		modelValue: {
			type: [String, Object],
			default: {},
		},
		areaShow: {
			type: Boolean,
			default: true,
		},
		houseType: {
			type: [String, Number],
			default: '',
		}
	})
	const searchParams = reactive({}) //总的搜索值
	
	const houseFilterItem0Ref = ref(null)
	const houseFilterItem1Ref = ref(null)
	const houseFilterItem2Ref = ref(null)
	const houseFilterItem3Ref = ref(null)

	onMounted(() => {
		getSortData();
	})
	const sortValue = ref('')
	const sortOptions = reactive([])
	const sortKey = ref('')
	watch(sortValue, (newValue) => {
		// searchParams[sortKey.value] = newValue;
		searchParams.sort_id = newValue;
		submit()
	})

	const getSortData = async () => {
		let fenliId = 2;
		let key = `houseFilter${fenliId}${props.houseType}`;
		let data = store.getters.get_houseFilter[key];
		if (!data) {
			await proxy.$u.api.houseFilter({
				fenli_id: fenliId,
				house_type: props.houseType,
				// p_id:,
			}).then(res => {
				let {
					code,msg
				} = res;
				if(code == 200){
					data = res.data.data
					store.commit('set_houseFilterItem',{
						key:key,
						value:data
					})
				}else{
					uni.$u.toast(msg || '错误');
				}
			})
		}
		data.forEach(item => {
			item.children.forEach(v => {
				sortOptions.push({
					label: v.house_tag_title,
					value: v.house_tag_id
				})
			})
			sortKey.value = item.filter_name
		})
	}


	const reset = () => {

	}
	const submit = (isClose) => {
		if(typeof isClose == "undefined"){
			isClose = true
		}
		emit('confirm', searchParams)
		isClose && closeDropdown()
	}
	const itemReset = (data) => {
		for (let key in data) {
			searchParams[key] = ''
		}
		submit(false)
	}
	const itemSubmit = (data) => {
		// console.log('itemSubmit');
		for (let key in data) {
			searchParams[key] = data[key]
		}
		submit()
	}
	const closeDropdown = () => {
		dropdownRef.value.close();
	}
	const onOpen = (index) => {
		// 展开某个下来菜单时，先关闭原来的其他菜单的高亮
		// 同时内部会自动给当前展开项进行高亮
		dropdownRef.value.highlight();
		console.log('onOpen',searchParams);
		setTimeout(()=>{
			if(props.areaShow){
				if(index == 0){
					houseFilterItem0Ref.value.setValue(searchParams)
				}
				if(index == 1){
					houseFilterItem1Ref.value.setValue(searchParams)
				}
				if(index == 2){
					houseFilterItem2Ref.value.setValue(searchParams)
				}
				if(index == 3){
					houseFilterItem3Ref.value.setValue(searchParams)
				}
			}else{
				if(index == 0){
					houseFilterItem1Ref.value.setValue(searchParams)
				}
				if(index == 1){
					houseFilterItem2Ref.value.setValue(searchParams)
				}
				if(index == 2){
					houseFilterItem3Ref.value.setValue(searchParams)
				}
			}
		},50)
	}
	const onClose = (index) => {
		// 关闭的时候，给当前项加上高亮
		// 当然，您也可以通过监听dropdown-item的@change事件进行处理
		dropdownRef.value.highlight(index);
	}
	const clearSearchParams = () =>{
		for (let key in searchParams) {
			searchParams[key] = ''
		}
		emit('confirm', searchParams)
	}
	defineExpose({
		clearSearchParams
	})
</script>

<style lang="scss" scoped>

</style>